<template>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">indexDb演练</h3>
    </div>
    <div class="panel-body">
      <legend>添加用户</legend>
      <div class="form-group">
        <label for="name">用户名</label>
        <input type="text" class="form-control" id="name" placeholder="输入用户名" v-model="name">
      </div>

      <div class="form-group">
        <label for="email">用户邮箱</label>
        <input type="text" class="form-control" id="email" placeholder="输入邮箱号" v-model="email">
      </div>

      <div class="form-group">
        <label for="address">家庭住址</label>
        <input type="text" class="form-control" id="address" placeholder="输入家庭住址" v-model="address">
      </div>
      <button type="button" class="btn btn-primary" @click="add">添加</button>
      <!-- <button type="button" class="btn btn-warning">删除</button> -->
    </div>
  </div>
</template>

<script>

export default {
  name: 'addDataComp',
  data () {
    return {
      id: 0,
      name: '',
      email: '',
      address: ''
    }
  },
  methods: {
    async add () {
      const data = {
        name: this.name,
        email: this.email,
        address: this.address
      }
      console.log(data)
      this.$emit('addData', data)
    }
  }
}
</script>
